<template>
  <view class="video-content-page">
    <!-- 返回按钮 -->
    <view class="back-btn" @click="goBack">←</view>

    <!-- 视频分类导航 -->
    <scroll-view class="video-type" scroll-x>
      <view 
        class="type-item" 
        v-for="type in videoTypes" 
        :key="type.id" 
        :class="{ active: currentType === type.id }" 
        @click="switchType(type.id)"
      >
        {{ type.name }}
      </view>
    </scroll-view>

    <!-- 视频列表+互动 -->
    <view class="video-list">
      <view class="video-item" v-for="video in videoList" :key="video.id">
        <!-- 作者信息+关注 -->
        <view class="video-author">
          <image 
            :src="video.authorAvatar || '/static/avatar-default.png'" 
            class="author-avatar" 
            mode="aspectFill"
          />
          <text class="author-name">{{ video.author }}</text>
          <button 
            class="follow-btn" 
            @click.stop="toggleFollow(video.authorId)" 
            :class="{ followed: isFollowed[video.authorId] }"
          >
            {{ isFollowed[video.authorId] ? '已关注' : '+关注' }}
          </button>
        </view>
        
        <!-- 视频描述 -->
        <text class="video-desc">{{ video.desc }}</text>
        
        <!-- 视频组件 -->
        <uni-video 
          :src="video.url" 
          class="video-player" 
          controls
          :autoplay="false"
          :poster="video.cover || '/static/video-cover.png'"
        ></uni-video>
        
        <!-- 互动按钮 -->
        <view class="video-actions">
          <text 
            class="action-btn" 
            @click="likeVideo(video.id)"
            :class="{ liked: video.liked }"
          >
            {{ video.likeCount }} {{ video.liked ? '❤️' : '♡' }}
          </text>
          <text class="action-btn" @click="toComment(video.id)">💬 评论</text>
          <text class="action-btn">···</text>
        </view>
      </view>
    </view>

    <CustomTabBar />
  </view>
</template>

<script setup>
import { ref, onLoad } from 'vue';
import CustomTabBar from '@/components/CustomTabBar.vue';

// 视频分类
const videoTypes = ref([
  { id: 1, name: "推荐" },
  { id: 2, name: "千里眼" },
  { id: 3, name: "搞笑" },
  { id: 4, name: "娱乐" }
]);
const currentType = ref(1);

// 视频数据（支持多视频）
const videoList = ref([
  {
    id: 1, 
    url: "/static/video1.mp4", 
    desc: "这些箱子里装的中高档卷烟共有1350余条，价值近50万元！",
    author: "开心哈哈大笑...", 
    authorAvatar: "/static/avatar/author2.png", 
    authorId: 2,
    likeCount: 120,
    liked: false,
    cover: "/static/video1.jpg"
  },
  {
    id: 2, 
    url: "/static/video2.mp4", 
    desc: "一个“背包客”，从郑州坐火车往返江南某市，竟然是为了...",
    author: "往事随风飘飘...", 
    authorAvatar: "/static/avatar/author3.png", 
    authorId: 3,
    likeCount: 256,
    liked: false,
    cover: "/static/video2.jpg"
  }
]);

// 关注状态（支持多作者）
const isFollowed = ref({
  2: false,
  3: false
});

onLoad((options) => {
  if (options && options.id) {
    const videoId = options.id;
    console.log("当前视频ID：", videoId);
    // 实际项目中根据ID请求数据
    // fetchVideoDetail(videoId).then(data => {
    //   videoList.value = [data];
    // });
  }
});

// 切换分类
const switchType = (typeId) => {
  currentType.value = typeId;
  // 实际项目中根据分类加载视频
};

// 关注/取消关注作者
const toggleFollow = (authorId) => {
  isFollowed.value[authorId] = !isFollowed.value[authorId];
  uni.showToast({
    title: isFollowed.value[authorId] ? '关注成功' : '已取消关注',
    icon: 'none'
  });
};

// 点赞视频
const likeVideo = (videoId) => {
  const video = videoList.value.find(item => item.id === videoId);
  if (video) {
    if (video.liked) {
      video.likeCount--;
    } else {
      video.likeCount++;
    }
    video.liked = !video.liked;
  }
};

// 跳转到评论页
const toComment = (videoId) => {
  uni.navigateTo({ url: `/pages/comment/comment?videoId=${videoId}` });
};

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    delta: 1
  });
};
</script>

<style scoped>
.video-content-page {
  padding: 20rpx;
  min-height: 100vh;
  padding-bottom: 60px;
  background: #f5f5f5;
}

/* 返回按钮 */
.back-btn {
  font-size: 32rpx;
  color: #333;
  padding: 10rpx;
  margin-bottom: 15rpx;
}

/* 分类导航 */
.video-type {
  white-space: nowrap;
  padding: 10rpx;
  margin-bottom: 20rpx;
  background: #fff;
  border-radius: 8rpx;
}

.type-item {
  display: inline-block;
  padding: 8rpx 16rpx;
  margin-right: 10rpx;
  font-size: 28rpx;
}

.type-item.active {
  color: #ff3333;
  border-bottom: 2rpx solid #ff3333;
}

/* 视频列表 */
.video-list {
  background: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
}

.video-item {
  margin-bottom: 30rpx;
}

.video-item:last-child {
  margin-bottom: 0;
}

/* 作者信息 */
.video-author {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.author-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 15rpx;
}

.author-name {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.follow-btn {
  background: #ff3333;
  color: #fff;
  border: none;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.follow-btn.followed {
  background: #eee;
  color: #999;
}

/* 视频描述 */
.video-desc {
  font-size: 26rpx;
  line-height: 36rpx;
  color: #333;
  margin-bottom: 15rpx;
  display: block;
}

/* 视频播放器 */
.video-player {
  width: 100%;
  height: 400rpx;
  border-radius: 8rpx;
  margin-bottom: 15rpx;
}

/* 互动按钮 */
.video-actions {
  display: flex;
  gap: 30rpx;
  padding: 10rpx 0;
}

.action-btn {
  font-size: 26rpx;
  color: #666;
}

.action-btn.liked {
  color: #ff3333;
}
</style>